 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        *{
             margin: 0;
             padding: 0;
        }
        #container{
            width: 1200px;
            margin: 0 auto;

        }
        #top{
            padding: 20px;
        }
        #bottom{
            position: relative;
        }
        .box{
            width: 220px;
            height: 360px;
            background-color: #e8e8e8;
            margin: 0 15px 15px 0;
        }
        .box p{
            color: orange;
            /* position: absolute; */
        }
     </style>
 </head>
 <body>
    <div id="container">
        <div id="top">
            <button id="btn1">3列</button>
            <button id="btn2">4列</button>
            <button id="btn3">5列</button>
        </div>
        <div id="bottom">
            <div class="box">
                <img src="./img/1.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/2.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/3.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/4.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/5.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/6.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/7.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/8.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/9.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/1.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/2.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/3.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/4.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/5.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/6.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/7.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/8.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
            <div class="box">
                <img src="./img/9.jpg" alt="">
                <h4>因为遇见你</h4>
                <p>孙怡邓伦牵手演绎刺绣奇缘</p>
            </div>
        </div>
    </div>

    <script>
        window.addEventListener("load",function(){
            $('btn1').addEventListener('click',()=>{
                jFlex(3,$('bottom'));
            });
            $('btn2').addEventListener('click',()=>{
                jFlex(4,$('bottom'));
            });
            $('btn3').addEventListener('click',()=>{
                jFlex(5,$('bottom'));
            });
        });
        function jFlex(allCols,parentNode){
            //1、定义变量
            let boxW=220,boxH = 360,marginXY=15;

            // 2、遍历
            for(let i= 0;i<parentNode.children.length;i++){
                //求出每一个盒子所在的行与列
                let row = Math.floor(i/allCols);
                let col = Math.floor(i%allCols);
                // console.log(`(${row},${col})`)
                //定位
                let currentBox = parentNode.children[i];
                currentBox.style.position = 'absolute';
                currentBox.style.left = col * (boxW + marginXY)+'px';
                currentBox.style.top =row * (boxH + marginXY)+'px';
            }
            
        }
        function $(id){
            return typeof id === "string"?document.getElementById(id) : null;
        }
    </script>
 </body>
 </html>